<template>
    <tool-header>
        {{ title }}
    </tool-header>
    <a-row justify="center">
        <a-col :flex="1">
            <div style="margin:20px">
                <a-form :label-col="labelCol">
                    <a-form-item label="Type" name="type">
                        <a-select v-model:value="modelRef.pgpType"  :options="pgpTypes"></a-select>
                    </a-form-item>
                    <a-form-item label="RSA Size" name="rsaSize">
                        <a-select v-model:value="modelRef.rsaSize"  :options="rsaSizeList"></a-select>
                    </a-form-item>
                    <a-form-item label="Expire In (year)" name="expireYear">
                        <a-input v-model:value="modelRef.expireYear" type="number" placeholder="Expire in year" />
                    </a-form-item>
                    <a-form-item label="User Id" name="userId">
                        <a-textarea v-model:value="modelRef.userId" auto-size />
                    </a-form-item>
                    <a-form-item label="Email" name="email">
                        <a-input v-model:value="modelRef.email"></a-input>
                    </a-form-item>
                    <a-form-item label="PassPhrase" name="passPhrase">
                        <a-input-password  v-model:value="modelRef.passphrase"></a-input-password>
                    </a-form-item>
                    <a-form-item :wrapper-col="{offset: 8}">
                        <a-button type="primary" @click="genPGP" :loading="loading">Generate PGP Key</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </a-col>
        <a-col :flex="3">
            <div style="margin:20px">
                <a-form>
                    <a-form-item label="Public Key">
                        <a-textarea v-model:value="pgpKey.publicKey" placeholder="" :rows="10" />
                    </a-form-item>
                </a-form>
                <a-form>
                    <a-form-item label="Private Key">
                        <a-textarea v-model:value="pgpKey.privateKey" placeholder="" :rows="10" />
                    </a-form-item>
                </a-form>
            </div>
        </a-col>
    </a-row>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { SelectProps } from 'ant-design-vue';
import { useRoute } from 'vue-router'
import ToolHeader from '../ToolHeader.vue'
import * as openpgp from 'openpgp';

const route = useRoute();
const title = route.query.title
const labelCol = { span: 6 };
interface PgpInfo {
    pgpType: string,
    userId: string,
    email: string,
    expireYear:number,
    rsaSize: number,
    passphrase: string
}
interface PgpKey {
    publicKey:string,
    privateKey:string
}
const pgpTypes = ref<SelectProps['options']>([
  {
    value: 'rsa',
    label: 'RSA',
  },
]);

const rsaSizeList = ref<SelectProps['options']>([
  {
    value: '2048',
    label: '2048',
  },
  {
    value: '4096',
    label: '4096',
  },
  {
    value: '8192',
    label: '8192',
  },
]);
const modelRef = reactive<PgpInfo>({
    pgpType: 'rsa',
    userId: 'demo',
    email: 'demo@demo.com',
    expireYear: 1,
    rsaSize: 2048,
    passphrase: '1234567890'
});

const pgpKey = reactive<PgpKey>({
    publicKey:'',
    privateKey:''
})

let loading = ref<boolean>(false)

const genPGP = async () => {
    loading.value = true;
    let userIds = [{
        name: modelRef.userId,
        email: modelRef.email
    }];
    const { privateKey, publicKey } = await openpgp.generateKey({
        type: modelRef.pgpType == 'rsa' ? 'rsa' : 'ecc', // Type of the key
        rsaBits: modelRef.rsaSize, // RSA key size (defaults to 4096 bits)
        keyExpirationTime: modelRef.expireYear*365*24*60*60, //key expired seconds from created.
        userIDs: userIds, // you can pass multiple user IDs
        passphrase: modelRef.passphrase // protects the private key
    });
    pgpKey.publicKey = publicKey;
    pgpKey.privateKey = privateKey;
    loading.value = false;
}
</script>